<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #canvas{
        border: 1px solid #000;
        background: #f7f7f7;
    }
</style>
</head>
<body>
    <canvas id='canvas' width="400" height="400">你的浏览器不支持canvas,请升级你的浏览器</canvas>
</body>
<script>
    var canvas = document.getElementById('canvas');

    var ctx=canvas.getContext('2d');
    
    ctx.fillStyle='rgba(200,0,200)';

    ctx.fillRect(10,10,50,50)//绘制正方形
    ctx.clearRect(20,20,30,30)//清空该区域
    ctx.strokeRect(30,30,50,50)//绘制带边框的正方形

    console.log(canvas.__proto__)

</script>
</html>